import React from "react"
import "../assets/css/comment/comment.css"
import { getSingleCommentApi } from "../api/jxx"
import Return from "../public/Return"

class Comment extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      color: "#fff",
      hotComments: []
    }
    // 更改返回按钮跟随文本
    props.setReturnMsg("评论")
  }

  // 触碰时更换背景为#ccc
  touchStart() {
    this.setState({
      color: "#ccc"
    })

  }

  // 触碰结束时背景更换为#fff
  toucHend() {
    this.setState({
      color: "#fff"
    })
    setTimeout(() => {
      this.props.changeShowplay(true)
    }, 50)
  }

  componentDidMount() {
    setTimeout(() => {
      // 获取音乐评论
      getSingleCommentApi(this.props.musicId)
        .then(res => {
          this.setState({
            hotComments: res.hotComments
          })
        })
    }, 50)
  }

  render() {
    let { playmusiclist, listmusicindex } = this.props
    const current = playmusiclist[listmusicindex]
    let cover,
      musicName,
      author
    try {
      cover = current.al.picUrl
      musicName = current.name
      author = current.ar[0].name
    } catch (e) {

    }

    return (
      <div className='comment--container'>
        <div className="hei"></div>
        <Return {...this.props} />
        <div
          className='comment--musicInformation'
          onTouchStart={() => { this.touchStart() }}
          onTouchEnd={() => { this.toucHend() }}
          style={{ backgroundColor: this.state.color }}
        >
          <img src={cover} className='comment--music__cover' />
          <div className='comment--music__information'>
            <span className='information__musicName'>{musicName}</span>
            <span className='information__author'>{author}</span>
          </div>
          <div className='enter'>
            <span className="iconfont icon-fanhui1"></span>
          </div>
        </div>
        <div className='interval'></div>
        <div className='comment--commentList'>
          <h4 className='commentList__wonderful'>精彩评论</h4>
          <ul>
            {
              this.state.hotComments.map((item, index) => {
                let msg = item.content
                msg = msg.split(/\n/g)  // 将评论根据换行符分割为数组
                return (
                  <li key={index} className="comment--commentList__userList">
                    <div className="comment--commentList__userInformation">
                      <img
                        className="comment--commentList__userAvatar"
                        src={item.user.avatarUrl}
                      />
                      <div className="comment--commentList__msg">
                        <h6 className="comment--commentList__nickName">{item.user.nickname}</h6>
                        {
                          msg.map((item, index) => {
                            return (
                              <p key={index}>{item}</p>
                            )
                          })
                        }
                      </div>
                      <span className="iconfont icon-dianzan1"></span>
                    </div>
                  </li>
                )
              })
            }
          </ul>
        </div>
      </div>
    )
  }
}

export default Comment